import Person from '@material-design-icons/svg/filled/person.svg';
import Settings from '@material-design-icons/svg/filled/settings.svg';
import { dom } from '@knno/dom';
import { bar } from './index.css';
import { renderTable } from './table';
import { renderGrid } from './grid';
import { renderList } from './list';
import { renderInfiniteGrid } from './gridLoadMore';
import { renderPulldown } from './pulldown';
import { showDialog } from './dialog';
import { renderPopup } from './popup';
import { renderSelect } from './select';
import { renderButtons } from './button';
import { button } from '@knno/ui/button';
import { Checkbox, checkbox } from '@knno/ui/checkbox';
import { group } from '@knno/ui/group';
import { radio } from '@knno/ui/radio';
import { toggle } from '@knno/ui/toggle';
import { empty } from '@knno/ui/empty';
import { lightTheme, darkTheme } from '@knno/ui/global.css';
import { input } from '@knno/ui/input';
import { loading, loadingDot } from '@knno/ui/loading';
import { textarea } from '@knno/ui/textarea';
import { Toast } from '@knno/ui/toast';
import { renderTag } from './tag';

const body = dom.wrap(document.body);
let chk: Checkbox;
let toastCount = 0;

body
	.css({
		paddingBottom: '500px',
	})
	.append(
		dom.div(bar).append(
			dom.label().text('缩放：'),
			dom
				.input()
				.attr({
					type: 'range',
					min: '10',
					max: '40',
				})
				.value('14')
				.on('change', function () {
					console.log(this.value());
					document.documentElement.style.fontSize = this.value() + 'px';
				}),
			dom.span().text('主题：'),
			dom.span().append(
				group()
					.append(
						radio().value('system').text('跟随系统'),
						radio().value('light').text('日间模式'),
						radio().value('dark').text('夜间模式')
					)
					.value(['system'])
					.ref((g) => {
						g.on('click', () => {
							const theme = g.value()[0];
							const root = dom.wrap(document.documentElement);
							root.removeClass(lightTheme, darkTheme);
							if (theme === 'light') {
								root.addClass(lightTheme);
							} else if (theme === 'dark') {
								root.addClass(darkTheme);
							}
						});
					})
			)
		),

		// button
		...renderButtons(),

		// checkbox
		dom.h2().text('多选'),
		dom.div(bar).append(
			checkbox().text('复选框'),
			checkbox().text('禁用的复选框').disabled(true),
			checkbox()
				.text('三态复选框')
				.checked('half')
				.ref((c) => (chk = c)),
			button()
				.text('恢复为三态')
				.on('click', () => {
					chk.checked('half');
				})
		),

		// radio
		dom.h2().text('单选'),
		dom
			.div(bar)
			.append(
				radio().text('单选框1').group('r1'),
				radio().text('单选框2').group('r1').checked(true),
				radio().text('单选框3').group('r1'),
				radio().text('禁用的单选框4').disabled(true).group('r1')
			),

		// toggle
		dom.h2().text('开关'),
		dom.div(bar).append(toggle().text('开关'), toggle().text('禁用开关').disabled(true)),

		// input
		dom.h2().text('输入框'),
		dom.div(bar).append(
			input()
				.placeholder('最多10个字符')
				.maxLength(10)
				.clearable(true)
				.on('input', () => console.log('on input ...')),
			input().readonly(true).value('只读文本').prefixIcon(Person),
			input().type('password').clearable(true).suffixIcon(Settings).prefixIcon(Person),
			input().type('text').placeholder('请输入'),
			input().type('date'),
			input().type('time'),
			input().type('datetime-local'),
			input().type('text').clearable(true).suffixIcon(Settings).prefixIcon(Person).disabled(true).text('禁用文字')
		),

		// textarea
		dom.h2().text('文本域'),
		dom
			.div(bar)
			.css({ alignItems: 'flex-start' })
			.append(
				textarea().maxLength(30).placeholder('固定高度，最多30个字符').lines(3).resize('fixed'),
				textarea().maxLines(8).placeholder('自动高度'),
				textarea().resize('manual').maxLines(10).lines(4).placeholder('用户改变大小：4~10行'),
				textarea().maxLines(4).readonly(true).value('这是只读文本'),
				textarea().maxLines(4).disabled(true).value('这是禁用文本')
			),

		// empty
		dom.h2().text('空数据图标'),
		dom.div(bar).append(empty()),

		// table
		...renderTable(),

		// grid
		...renderGrid(),

		// infinit grid
		...renderInfiniteGrid(),

		// list
		...renderList(),

		// loading
		dom.h2().text('加载动画'),
		dom.span().append(loading(), loadingDot()),

		...renderPulldown(),

		// toast
		dom.h2().text('Toast'),
		button()
			.text('弹出一个提示')
			.type('primary')
			.on('click', () => {
				++toastCount;
				console.log('toast:' + toastCount);
				Toast.show('这是一个提示:' + toastCount);
			}),

		// Dialog
		...showDialog(),

		// Popup
		...renderPopup(),

		...renderSelect(),

		...renderTag()
	);
